Fex-AIGC插件新增百宝箱，支持胖瘦模式英文一键翻译

背景

当前翻译的流程：

1. 打开扫描脚本，填好代码目录，执行脚本
2. 将扫描出来的结果，在ai翻译平台进行翻译
3. 等翻译好后，手动复制到en.js文件中

这只是针对老的写法_('xx')，在使用i18n做翻译的场景，需要执行另一套流程：

1. 执行项目中集成的扫描yml的脚本
2. 将扫描出来的结果，在ai翻译平台进行翻译
3. 由于yml是分模块的多文件，需要将翻译结果手动复制回指定文件

以上流程执行起来较为繁琐，且没弄过的人具有一定的上手成本。

优化方案

Fex-AIGC插件新增百宝箱

首先，需要个node环境去执行我们的自动脚本，所以在vscode插件中新增一百宝箱tab，内置好一键翻译的功能。

并且提供便携的接入方式，方便后续新增各种功能。

Fex-AIGC 百宝箱接入新功能流程

添加入口配置

packages\webview\src\views\tools\const.ts

{
  icon: 'translate', // 图标名，idux组件
  name: 'AI翻译',	// 工具名
  path: '/translate', // 页面路由
},

编写页面

vue3写法，不赘述

与vscode的通信方式：

vue页面处理事件

import { vscode } from "@/hooks";

// 发送事件
vscode.postMessage('checkProjectMode');
// 接收事件
vscode.onMessage('checkProjectModeEnd', async ({ data }) => {
  formGroup.setValue({ mode: data as CodeModeEnum });
})

vscode处理事件

packages\vscode\src\webview\webviewProtocol.ts

在该文件中添加事件处理

// 接收
this.on('checkProjectMode', async () => {
  const mode = checkProjectMode();
  // 发送
  await this.request('checkProjectModeEnd', mode)
})

调试成功后即可发布了。

一键翻译

自动检查胖瘦模式

由于翻译脚本需要支持胖瘦两项目，每次手动选择项目也很繁琐，所以这里做了根据文件目录自动判断项目类型的逻辑，减少操作步骤。

老翻译函数

扫描

项目中存在_('xx')，__('xx')两种翻译函数，这里我们通过移植以前的翻译脚本到vscode插件中。

需要注意的点：

1. require写法需改成import
2. 文件路径需通过vscode.workspace.rootPath去获取
3. eval在vscode会有性能问题，会偶发闪退，这里通过JSON.parse去替代

翻译

以前是扫描出来写入一个文件中，现在我们可以直接拿到数据，构造成文件:

const fileFormData = new FormData();
const blob = new Blob([fileData], { type: blobType });
fileFormData.append('file', blob, fileName);

再传给ai翻译平台

轮询翻译结果后，将结果写入en.js文件中

yml翻译

扫描

vue3新增的i18n，文件存在yml中，同样的移植扫描脚本

需要注意的点：

1. 文件路径需通过vscode.workspace.rootPath去获取
2. 原来新增的中文yml文件，会只列出名字，这里我们需要将其中的内容都添加到收集map中去

翻译

由于yml存在多文件，翻译做成多次请求，并附上了进度。

翻译完按路径写入到对应文件中。

效果

以控制器举例，原来的一套流程下来，大概需要1小时，手动复制还容易出错。

现在只需打开vscode插件，一键点击，即可自动翻译好，写入到代码中，1分钟即可解决。